<template>
	<!-- 设置 -->
	<view class="set-up-container">
		<nav-bar :title="i18n.set.set" @_back="_back" />
		<view class="container">
			<view class="avator">
				<u-avatar @click="chooseAvatar" :src="avatar?avatar:src" size="130" show-level level-icon="camera-fill">
				</u-avatar>
			</view>
			<!-- 列表 -->
			<view class="set-list dis-between" v-for="(item, index) in list" :key="index" @click="jump(item)">
				<text class="white-text">{{item.title}}</text>
				<view>
					<text>{{item.content}}</text>
					<u-icon v-show="item.isShow" class="icon" name="arrow-right" color="rgba(255, 255, 255, .4)"
						size="12"></u-icon>
				</view>
			</view>
			<custom-submit :title="i18n.set.logOut" @click="loginOut"></custom-submit>
		</view>
		<tips-popup ref="tips" @click="confirmClick"></tips-popup>
		<custom-loading text="" mask="true" click="true" ref="loading"></custom-loading>
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import CustomLoading from '@/components/Loadidng/index.vue'
	import {
		userHeadpic
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			CustomSubmit,
			CustomLoading
		},
		computed: {
			...mapGetters([
				'nickname',
				'avatar',
				'name',
				'language',
				'token',
				'version',
				'account_number'
			]),
			i18n() {
				return this.$t('message');
			},
			list() {
				return [{
						title: this.i18n.set.mailbox,
						content: this.account_number,
						isShow: false,
						url: ''
					},
					{
						title: this.i18n.set.nickname,
						content: this.nickname,
						isShow: true,
						url: '/pages/set/modifynickname'
					},
					{
						title: this.i18n.set.language,
						content: this.language === 'zh-HK' ? this.i18n.set.tradition : this.language === 'en-US' ? this
							.i18n.set.english : this.i18n.set.chinese,
						isShow: true,
						url: '/pages/set/language'
					},
					{
						title: this.i18n.set.changeLoginPassword,
						content: '',
						isShow: true,
						url: '/pages/set/modifypsw'
					},
					{
						title: this.i18n.set.aboutUs,
						content: this.version,
						isShow: true,
						url: ''
					},
				]
			}
		},
		data() {
			return {
				src: '../../static/images/ui/1.jpg',
			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.$refs.loading.open();
				// 可以在此上传到服务端
				uni.uploadFile({
					url: 'http://13860.shikecm.com/api/upload',
					filePath: path,
					name: 'file',
					complete: (reslove) => {
						this.$refs.loading.close();
						let data = JSON.parse(reslove.data);
						if (data.type !== 'ok') return;
						userHeadpic({
							headpic: data.message,
							token: this.token
						}).then(res => {
							if (res.error) return;
							Toast(this.i18n.set.modifyAvatar);
							this.$store.commit("user/SET_HEAD_PORTRAIT", data.message)
						})
					}
				});
			})
		},
		methods: {
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 65,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 65,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			jump(item) {
				if (!item.url) return;
				uni.navigateTo({
					url: item.url
				})
			},
			loginOut() {
				this.$refs.tips.open('other', this.i18n.common.loginOut);
			},
			confirmClick() {
				this.$store.dispatch('user/logout').then(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.set-up-container {
		.avator {
			margin: 60rpx auto 20rpx;
			width: 130rpx;
		}

		.set-list {
			height: 120rpx;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
			color: rgba(255, 255, 255, .54);
			font-size: 28rpx;

			.icon {
				margin-left: 30rpx;
			}
		}
	}
</style>
